<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<blockquote class="layui-elem-quote layui-text">
    订单管理
</blockquote>
<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">订单号</label>
        <div class="layui-input-inline">
            <input type="tel" name="orderid" id="orderid"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <button class="layui-btn"  id="seach" onclick="search()">搜索</button><br>
    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header" id="order"></div>
                    <div class="layui-card-body" id="orderbody">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <ul class="layui-timeline" id="timezhou">

    </ul>
    <div class="larry-personal-body clearfix">
        <table class="layui-hide"  id="ordertable" lay-filter="ordertable"></table>
    </div>
</div>
</body>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">右侧进行筛选导出</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!--th:inline="none" 解决thymeleaf模板解析错误-->
<script type="text/javascript" th:inline="none">
    function  search() {//根据
        var orderid = $("#orderid").val();
        $("#orderbody").html('');
        $("#timezhou").html('');
        $.ajax( {
            url:"getorderbyid",
            data:{
                'id':orderid
            },
            method:'GET',
            success:function (order) {
                $("#order").html('订单号：'+orderid+'('+order['status']+')');
                $("#orderbody").append('发件人：'+order['shipper']+'&nbsp;发件人手机：'+order['shipperPhone']+'&nbsp;发件人地址：'+order['shippingAddress']+'&nbsp;下单时间：'+order['shipTime']);
                $("#orderbody").append('<br>收件人：'+order['receiver']+'&nbsp;收获人手机：'+order['receiverPhone']+'&nbsp;收获人地址：'+order['receiverAddress']);
                var logistics=order['logisticsList'];
                console.log(logistics);
                for(var i=logistics.length-1;i>=0;i--)
                {
                    console.log(logistics[i]);
                    $("#timezhou").append(' <li class="layui-timeline-item">\n' +
                        '            <i class="layui-icon layui-timeline-axis"></i>\n' +
                        '            <div class="layui-timeline-content layui-text">\n' +
                        '                <h3 class="layui-timeline-title">'+'('+logistics[i].operation+')'+logistics[i].operationTime+
                        '                </h3><p>'+logistics[i].operator+'&nbsp;'+logistics[i].details+'<br>'+logistics[i].address);
                    if(logistics[i].phone!=0)
                    {
                        $("#timezhou").append('<br> 在线联系：'+logistics[i].phone);
                    }
                    $("#timezhou").append(' </p>\n' +
                        '            </div>\n' +
                        '        </li>');
                }
            },
            error:function (order) {
                layer.msg(order)
            }
        })
    }
    layui.use('table', function(){
        var table = layui.table;//高版本建议把括号去掉，有的低版本，需要加()
        table.render({
            elem: '#ordertable'
            ,url: 'getallorders' //数据接口
            ,page: false //开启分页
            ,toolbar: '#toolbarDemo'
            ,cols: [[{field: 'id', title: 'id',  sort: true, fixed: 'left',width:80}
                ,{field: 'orderTime', title: '下单时间',sort:true,width:80}
                ,{field: 'receiverAddress', title: '收货地址'}
                ,{field: 'receiver', title: '收货人' ,edit:'text'}
                ,{field: 'receiverPhone', title: '收货人手机' }
                ,{field: 'shippingAddress', title: '发货地址'}
                ,{field: 'shipper', title: '发货人'}
                ,{field: 'shipperPhone', title: '发货人手机'}
                ,{field: 'status', title: '物流状态'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
        });
        //头工具栏事件
        //监听单元格编辑
        table.on('tool(ordertable)', function(obj){
            var data = obj.data;
            console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        url:'deletebyid',
                        data: {
                            'id':data.id,
                        },
                        method:'GET',
                        traditional: true,
                        success:function (msg) {
                            layer.msg(msg);
                            obj.del();
                        },
                        error:function (msg) {
                            layer.msg(msg)
                        }
                    });
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.msg(JSON.stringify("您可以直接单击单元格进行编辑"))
            }
        });
    });

</script>
